﻿import QtQuick
import QtQuick.Controls
import QtQuick.Window
import FilUI

Item {
    id: control

    property string headerText: ""
    property int headerHeight: 45
    property Component headerDelegate: com_header
    property bool expand: false
    property int contentHeight: 300
    default property alias content: container.data

    implicitHeight: Math.max((layout_header.height + layout_container.height), layout_header.height)
    implicitWidth: 400
    clip: true

    QtObject {
        id: d
        property bool flag: false
        function toggle() {
            d.flag = true
            expand = !expand
            d.flag = false
        }
    }

    Component {
        id: com_header
        Item {

        }
    }

    Rectangle {
        id: layout_header
        width: parent.width
        height: control.headerHeight
        radius: 4
        border.color: FilTheme.dividerColor
        color: {
            if (Window.active) {
                return FilTheme.frameActiveColor
            }
            return FilTheme.frameColor
        }
        MouseArea {
            id: control_mouse
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                d.toggle()
            }
        }
        Loader {
            anchors {
                top: parent.top
                bottom: parent.bottom
                left: parent.left
                right: btn_toggle.left
            }
            sourceComponent: control.headerDelegate
            Component.onDestruction: sourceComponent = undefined
        }
        FilIconButton {
            id: btn_toggle
            anchors {
                verticalCenter: parent.verticalCenter
                right: parent.right
                rightMargin: 15
            }
            color: {
                if (control_mouse.containsMouse || hovered) {
                    return Qt.rgba(245/255, 245/255, 245/255, 1)
                }
                return Qt.rgba(0, 0, 0, 0)
            }
            onClicked: {
                d.toggle()
            }
            contentItem: FilIcon {
                rotation: expand ? 0 : 180
                iconSource: FilIcons.ChevronUp
                iconSize: 15
                Behavior on rotation {
                    enabled: FilTheme.animationEnabled
                    NumberAnimation {
                        duration: 167
                        easing.type: Easing.OutCubic
                    }
                }
            }
        }
    }
    Item {
        id: layout_container
        anchors {
            top: layout_header.bottom
            topMargin: -1
            left: layout_header.left
        }
        visible: contentHeight + container.anchors.topMargin !== 0
        height: contentHeight + container.anchors.topMargin
        width: parent.width
        z: -999
        clip: true
        Rectangle {
            id: container
            anchors {
                fill: parent
                topMargin: -contentHeight
            }
            radius: 4
            color: {
                if (Window.active) {
                    return FilTheme.frameActiveColor
                }
                return FilTheme.frameColor
            }
            border.color: FilTheme.dividerColor
            states: [
                State {
                    name: "expand"
                    when: control.expand
                    PropertyChanges {
                        target: container
                        anchors.topMargin: 0
                    }
                },
                State {
                    name: "collapsed"
                    when: !control.expand
                    PropertyChanges {
                        target: container
                        anchors.topMargin: -contentHeight
                    }
                }
            ]
            transitions: [
                Transition {
                    to: "expand"
                    NumberAnimation {
                        properties: "anchors.topMargin"
                        duration: FilTheme.animationEnabled && d.flag ? 167 : 0
                        easing.type: Easing.OutCubic
                    }
                },
                Transition {
                    to: "collapsed"
                    NumberAnimation {
                        property: "anchors.topMargin"
                        duration: FilTheme.animationEnabled && d.flag ? 167 : 0
                        easing.type: Easing.OutCubic
                    }
                }
            ]
        }
    }
}
